<template>
	<div class="hello">
		<div class="aa"></div>
		<img src="../assets/img/zwkx-logo.png" />
		<div class="bb"></div>
		<ul>
			<li v-for="(a,index) in list" :key="index">
				<div @click="tz(a)">
					<img src="../assets/img/fz.png" />
					<i :style="{'font-size':size}" id="icon" :class="a.icon"></i>
				</div>
				<h4 @click="tz(a)">{{a.title}}</h4>
				<p @click="tz(a)">
					<span v-for="(r,index) in a.childMenuList" :key="index" v-if="index<5">
						{{r.title}}
						<span v-if="index !== 2&&index !== 4&&index !== a.childMenuList.length-1">|</span>
					</span>
				</p>
				<div class="cc"></div>
			</li>
		</ul>
		<p>杭州数询云知科技有限公司</p>
	</div>
</template>

<script>
	export default {
		name: 'Hello',
		data() {
			return {
				list: [],
				size: ''
			}
		},
		mounted() {
			this.getData();
			this.setHtmlFontSize();
			var _this = this
			if (window.addEventListener) {
				window.addEventListener('resize', function() {
					_this.setHtmlFontSize()
				}, false)
			}
		},
		methods: {
			setHtmlFontSize() {
				// 1366是设计稿的宽度，当大于1366时采用1366宽度，比例也是除以13.66
				var deviceWidth = document.documentElement.clientWidth
				this.size = deviceWidth / 40 + 'px'
			},
			getData() {
				this.$get("/menu/allTree").then(r => {
					for (var a in r.data.data.data.menuList) {
						var aa = r.data.data.data.menuList[a]
						if (aa.title == '系统管理') {
							r.data.data.data.menuList.splice(a, 1)
						}
					}
					this.list = r.data.data.data.menuList;
				})
			},
			tz(a) {
				if (a.auth) {
					return this.$router.push({
						path: a.index
					})
				} else {
					return this.$message({
						message: '您暂时没有该权限',
						type: 'warning'
					});
				}
			}
		}
	}
</script>
<style>
	.el-message .el-icon-warning {
		font-size: 18px;
	}
</style>
<style scoped>
	.hello {
		height: 100%;
		width: 100%;
		background: url(../assets/img/bg2.png) center center no-repeat;
		background-size: 100% 100%;
	}

	.hello .aa {
		height: 10.64814%
	}

	.hello .bb {
		height: 14.4444%;
	}

	.hello>img {
		display: block;
		margin: 0 auto;
		width: 15.78125%;
	}

	.hello ul {
		width: 71.25%;
		margin: 0 auto;
		height: 49.4444444%;
	}

	.hello ul li {
		float: left;
		width: 33.3333%;
		height: 50%;
	}

	.hello ul li .cc {
		height: 30.71161%;
	}

	.hello ul li:nth-child(4) {
		clear: left;
		margin-left: 16.6666666%;
	}

	.hello ul li>div {
		width: 27.41228%;
		margin: 0 auto;
		cursor: pointer;
		position: relative;
	}

	.hello ul li img {
		width: 1.30rem;
		height: 1.25rem
	}

	.hello ul li h4 {
		text-align: center;
		font-size: 20px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		width: 50%;
		margin: .16rem auto 0;
		cursor: pointer;
	}

	.hello ul li i {
		position: absolute;
		top: 30%;
		left: 30%;
		background-image: -webkit-linear-gradient(bottom, #D8D8D8, #1492FF, #1492FF);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.hello ul li p {
		width: 200px;
		font-size: 14px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin: 5px auto 0;
		text-align: center;
		cursor: pointer;
	}

	.hello>p {
		width: 100%;
		height: 22px;
		font-size: 16px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 22px;
		text-align: center;
		position: fixed;
		bottom: 24px;
		left: 0;
	}
</style>
